{% extends '../_manage.html' %}

{% block title %} {{ _('All Topics') }} {% endblock %}

{% block head %}
<script>
$(() => {
	doAsync(
		async () => {
			let boardsResp = await getJson('/api/boards');
			let boards = boardsResp.results.reduce((obj, b) => {
            	obj[b.id] = b;
            	return obj;
            }, {});
            let topicResponse = await getJson('/api/topics', { page: parseInt('{{ page }}') });
            let page = topicResponse.page;
            let topics = topicResponse.results;
            topics.map(t => {
                t.board = boards[t.boardId];
            });
            return {
                topics: topics,
                page: page
            };
		},
		data => initVM(data),
		err => UIkit.modal.alert(translateError(err))
	);
});

    function initVM(data) {
        var vm = new Vue({
            el: '#vm',
            data: {
                topics: data.topics,
                page: data.page
            },
            created: function () {
                $('#loading').hide();
                $('#vm').show();
            },
            methods: {
                lockTopic: function (t) {
                    UIkit.modal.alert('unsupported yet.');
                },
                deleteTopic: function (t) {
                    UIkit.modal.confirm(`Topic "${t.name}" will be deleted. Continue?`, () => {
                        doAsync(async () => {
                            await postJson(`/api/topics/${t.id}/delete`);
                        }, () => {
                            refresh();
                        }, (err) => {
                            UIkit.modal.alert(translateError(err));
                        });
                    });
                },
                deleteTopicAndLock: function (t) {
                    UIkit.modal.confirm(`Topic "${t.name}" will be deleted, and user "${t.userName}" will be locked. Continue?`, () => {
                        doAsync(async () => {
                            await postJson(`/api/users/${t.userId}/lock/5000000000000`);
                            await postJson(`/api/topics/${t.id}/delete`);
                        }, () => {
                            refresh();
                        }, (err) => {
                            UIkit.modal.alert(translateError(err));
                        });
                    });
                }
            }
        });
    }
</script>
{% endblock %}

{% block main %}

<div id="error" class="uk-width-1-1">
</div>

<div id="loading" class="uk-width-1-1">
    <i class="uk-icon-spinner uk-icon-spin"></i> {{ _('Loading') }}...
</div>

<div id="vm" class="uk-width-1-1">
    <ul class="uk-tab" data-uk-tab>
        <li><a href="#0" onclick="location.assign('/manage/board/')">{{ _('Boards') }}</a></li>
        <li class="uk-active"><a href="#0">{{ _('Topics') }}</a></li>
        <li><a href="#0" onclick="location.assign('/manage/board/reply')">{{ _('Replies') }}</a></li>
    </ul>
    <div class="uk-margin">
        <a href="javascript:refresh()" class="uk-button"><i class="uk-icon-refresh"></i> {{ _('Refresh') }}</a>
    </div>

    <table class="uk-table uk-table-hover">
        <thead>
            <tr>
                <th width="10%">{{ _('Image') }}</th>
                <th width="10%">{{ _('User') }}</th>
                <th width="50%">{{ _('Name') }}</th>
                <th width="15%">{{ _('Created') }}</th>
                <th width="15%">{{ _('Action') }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="t in topics">
                <td>
                    <img v-bind:src="t.userImageUrl" class="uk-comment-avatar uk-border-circle x-avatar"
                        style="width:50px;height:50px;">
                </td>
                <td>
                    <a v-bind:href="'/user/' + t.userId" v-text="t.userName"></a>
                </td>
                <td>
                    <p>
                        <a v-text="t.name" v-bind:href="'/discuss/' + t.board.id + '/' + t.id" target="_blank"></a>
                        <span v-if="t.refId > 0">[<a v-bind:href="'/ref/' + t.refType + '/' + t.refId" target="_blank">问题来源</a>]</span>
                        <i class="icon-tag"></i> <span v-text="t.tags"></span>
                    </p>
                    <div v-html="t.content"></div>
                </td>
                <td>
                    <span v-text="t.createdAt.toDateTime()"></span>
                </td>
                <td>
                    <a v-on:click="lockTopic(t)" title="Lock topic" href="#0" class="x-btn"><i class="uk-icon-lock"></i></a>
                    <a v-on:click="deleteTopic(t)" title="Delete topic" href="#0" class="x-btn"><i class="uk-icon-trash"></i></a>
                    <a v-on:click="deleteTopicAndLock(t)" title="Delete topic and lock user" href="#0" class="x-btn"><i class="uk-icon-ban"></i></a>
                </td>
            </tr>
        </tbody>
    </table>

    <div v-if="page.total===0" class="x-empty-list">
        <p>No topic found.</p>
    </div>

    <div is="pagination" v-bind:page="page"></div>
</div>

{% endblock%}